﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Edge WebView2</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 350;
            backdrop-filter: blur(20px) saturate(125%);
            margin: 0;
            padding: 0;
            background-color: white
        }

        .header {
            grid-area: header;
            font-weight: normal;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .header-container {
            padding: 1.5rem 10rem 1rem 10rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
            background-color: transparent;
            background-image: linear-gradient(135deg, #eadeff, #dfeaff 25%, #f1fcff 70%, #e5fffc);
            margin-bottom: 2rem;
        }

        div.header-container  a {
            background-color: white !important;
        }

        .header-title-box {
            grid-column: 1 / 3;
            padding: 20px;
        }

        .header-image-box {
            padding: 20px;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            padding: 20px;
            grid-gap: 20px;
            border-radius: 16px;
            margin: 0 5rem 4rem 5rem;
            background-color: #F0F8FF;
        }

        .box {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

            .box h2 {
                font-size: 20px;
                font-weight: normal;
                margin-bottom: 10px;
            }

            .box ul {
                list-style: none;
                padding: 0;
            }

                .box ul li {
                    margin-bottom: 5px;
                }

        a {
            color: #0078d4;
            text-decoration: none;
        }

        input {
            padding: 8px;
            border: 1px solid #ccc;
            background-color: #f5f5f5;
            font-size: 14px;
            border-radius: 4px;
            transition: border-color 0.2s ease;
        }

            input:hover {
                border-color: #0078d4;
            }

        button {
            display: inline-block;
            padding: 8px 16px;
            border: 1px solid #ccc;
            background-color: transparent;
            color: #333;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

            button:hover {
                background-color: #f5f5f5;
            }

        .button-link {
            display: inline-block;
            padding: 8px 16px;
            border: 1px solid #ccc;
            background-color: transparent;
            color: #333;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

            .button-link:hover {
                background-color: #f5f5f5;
            }
    </style>
</head>
<body>
    <div class="header-container">
        <div class="header-title-box">
            <div class="header">Microsoft Edge WebView2</div>
            <span> Welcome to the WebView2 API sample app!</span>
            <div style="padding-top: 1rem;">
                <span>
                    <a class="button-link" href="https://github.com/MicrosoftEdge/WebView2Announcements/issues">Announcements</a>
                    <a class="button-link" href="https://learn.microsoft.com/en-us/microsoft-edge/webview2/?form=MA13LH">Documentation</a>
                    <a class="button-link" href="https://github.com/MicrosoftEdge/WebViewFeedback/issues/">Feedback</a>
                </span>
            </div>
        </div>
        <div class="header-image-box">
            <img src="AppStartPageBackground.png" alt="WebView2 logo"
                 style="width: 12rem; border-radius: 4px;">
        </div>
    </div>
    <div class="container">
        <div class="box" style="grid-column: 1 / 3">
            <h2>SDK Information</h2>
            <dl style="text-wrap: wrap; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                <dt>SDK build</dt>
                <dd id="sdkBuild" style="font-weight:500">...</dd>
                <dt>Runtime version</dt>
                <dd id="runtimeVersion"style="font-weight:500">...</dd>
                <dt>App path</dt>
                <dd id="appPath">...</dd>
                <dt>Runtime path</dt>
                <dd id="runtimePath">...</dd>
            </dl>
        </div>

        <div class="box">
            <h2>GitHub Issues</h2>
            <form action="https://github.com/MicrosoftEdge/WebViewFeedback/issues">
                <label>
                    <input type="text" name="q" value="is:issue is:open">
                </label>
                <button>Search</button>
            </form>

            <a href="https://github.com/MicrosoftEdge/WebView2Feedback/discussions" style="margin-top: 10px;">
                View Community Discussions
            </a>

            <h2>Documentation</h2>
            <form action="https://learn.microsoft.com/search/">
                <label>
                    <input type="text" name="terms" value="WebView2">
                </label>
                <button>Search</button>
            </form>
        </div>

        <div class="box">
            <h2>SDK releases</h2>
            <ul id="sdkReleases">
                <!-- Populate with actual SDK release information -->
            </ul>
            <hr>
            <a href="https://www.nuget.org/packages/Microsoft.Web.WebView2/1.0.2365.46#versions-body-tab">Nugets Packages Page: Microsoft.Web.WebView2</a>
        </div>

        <div class="box">
            <h2>Downloads</h2>
            <ul>
                <li><a href="https://developer.microsoft.com/microsoft-edge/webview2/">WebView2 Runtimes</a></li>
                <li><a href="https://learn.microsoft.com/en-us/microsoft-edge/webview2/code-samples-links">WebView2 Sample Apps</a></li>
            </ul>
        </div>

        <div class="box">
            <h2>Release Notes</h2>
            <ul>
                <li><a href="https://learn.microsoft.com/microsoft-edge/webview2/releasenotes">WebView2 SDK</a></li>
                <li><a href="https://learn.microsoft.com/deployedge/microsoft-edge-relnote-stable-channel">Edge Stable channel</a></li>
                <li><a href="https://learn.microsoft.com/deployedge/microsoft-edge-relnote-beta-channel">Edge Beta channel</a></li>
            </ul>
        </div>
    </div>

    <script src="AppStartPage.js"></script>
</body>
</html>